<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#667eea" />

    <link rel="manifest" href="./manifest.webmanifest" />
    <link rel="shortcut icon" href="./favicon.png" />

    <link
      rel="stylesheet"
      href="https://fonts.googleapis.com/css?family=Montserrat:400,600&font-display=swap"
    />

    <link rel="stylesheet" href="./src/theme.css" />
    <link rel="stylesheet" href="./src/app.css" />
    <link rel="stylesheet" href="./src/app.desktop.css" />

    <title>Media demo | Algolia</title>
  </head>

  <body>
    <header class="header">
      <p class="header-logo">
        <a href="https://algolia.com" aria-label="Go to the Algolia website">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 117">
            <path
              fill="#FFF"
              d="M249.5 64.2V1.4c0-.9-.7-1.5-1.6-1.4L236.2 2a1.4 1.4 0 0 0-1.2 1.3V67c0 3 0 21.6 22.4 22.3a1.4 1.4 0 0 0 1.5-1.4v-9.5c0-.7-.6-1.3-1.2-1.4-8.2-.9-8.2-11-8.2-12.7ZM443.5 24.4h-11.8c-.8 0-1.4.6-1.4 1.4v62c0 .8.6 1.4 1.4 1.4h11.8c.8 0 1.4-.6 1.4-1.4v-62c0-.8-.6-1.4-1.4-1.4ZM431.7 16.6h11.8c.8 0 1.4-.6 1.4-1.3v-14c0-.8-.7-1.4-1.6-1.3L431.5 2a1.4 1.4 0 0 0-1.2 1.3v12c0 .8.6 1.4 1.4 1.4Zm-20.5 47.6V1.4c0-.9-.7-1.5-1.5-1.4L397.9 2a1.4 1.4 0 0 0-1.2 1.3V67c0 3 0 21.6 22.4 22.3a1.4 1.4 0 0 0 1.5-1.4v-9.5c0-.7-.5-1.3-1.2-1.4-8.2-.9-8.2-11-8.2-12.7Zm-30.7-31c-2.6-2.8-5.8-5-9.6-6.5a31.7 31.7 0 0 0-12-2.3c-4.5 0-8.5.7-12.2 2.3A27.9 27.9 0 0 0 331 43.5a39.6 39.6 0 0 0 0 26.3c1.5 4 3.6 7.5 6.2 10.3 2.6 2.9 5.8 5 9.5 6.7a38 38 0 0 0 12.2 2.4c2.8 0 8.6-.9 12.3-2.4a27 27 0 0 0 9.5-6.7 35.1 35.1 0 0 0 8.3-23c0-4.9-.8-9.6-2.4-13.6-1.5-4-3.5-7.4-6.1-10.2ZM370 71.5a13.1 13.1 0 0 1-11.2 5.6 13 13 0 0 1-11.2-5.6c-2.7-3.6-4-7.9-4-14.2 0-6.3 1.3-11.5 4-15.1a13 13 0 0 1 11.1-5.5 13 13 0 0 1 11.3 5.5c2.6 3.6 4 8.8 4 15 0 6.4-1.3 10.6-4 14.3Zm-161.6-47H197a32 32 0 0 0-27 15 33.8 33.8 0 0 0 8.9 45.9 18.8 18.8 0 0 0 11.2 3.1H191.2l.6-.2h.2a21 21 0 0 0 16.5-14.6V87c0 .8.6 1.4 1.4 1.4h11.7c.8 0 1.4-.6 1.4-1.4V25.8c0-.8-.6-1.4-1.4-1.4h-13Zm0 48.3a17.8 17.8 0 0 1-10.4 3.5h-.2a12.5 12.5 0 0 1-.7 0A18.4 18.4 0 0 1 180.4 51c2.7-6.8 9-11.6 16.6-11.6h11.5v33.3Zm289-48.3H486a32 32 0 0 0-27 15 33.8 33.8 0 0 0 8.8 45.9 18.8 18.8 0 0 0 11.3 3.1h1.1l.6-.2h.2a21 21 0 0 0 16.5-14.6V87c0 .8.6 1.4 1.4 1.4h11.7c.8 0 1.4-.6 1.4-1.4V25.8c0-.8-.6-1.4-1.4-1.4h-13.1Zm0 48.3a17.8 17.8 0 0 1-10.5 3.5h-.9A18.4 18.4 0 0 1 469.4 51c2.6-6.8 9-11.6 16.6-11.6h11.5v33.3ZM306.3 24.4h-11.5a32 32 0 0 0-27 15 33.7 33.7 0 0 0-5.1 14.6 34.6 34.6 0 0 0 0 7.6c1 8.9 5.4 16.7 11.8 22a19.5 19.5 0 0 0 2.2 1.7 18.8 18.8 0 0 0 21.6-.6c3.8-2.7 6.7-6.7 8-11.1V87.9c0 5-1.3 8.9-4 11.5-2.7 2.6-7.3 3.9-13.6 3.9-2.6 0-6.7-.2-10.9-.6a1.4 1.4 0 0 0-1.4 1l-3 10a1.4 1.4 0 0 0 1.1 1.8c5 .7 10 1 12.8 1 11.4 0 19.8-2.4 25.3-7.4 5-4.6 7.8-11.4 8.2-20.7V25.8c0-.8-.6-1.4-1.3-1.4h-13.2Zm0 15s.2 32.4 0 33.4a17.5 17.5 0 0 1-10 3.4h-.2a13.6 13.6 0 0 1-1.7 0A18.7 18.7 0 0 1 278.3 51c2.6-6.8 9-11.6 16.5-11.6h11.5ZM58.2 0A58.3 58.3 0 1 0 86 109.5c.9-.5 1-1.6.3-2.2l-5.5-4.9a3.8 3.8 0 0 0-4-.6A47 47 0 0 1 11 57.5 47.3 47.3 0 0 1 58.2 11h47.3v84L78.7 71.2a2 2 0 0 0-3 .3 22 22 0 1 1 4.4-15.2 4 4 0 0 0 1.3 2.6l7 6.2c.8.7 2 .3 2.3-.8a33 33 0 0 0-30.4-39 33 33 0 0 0-35 32 33.3 33.3 0 0 0 32.2 33.9 32.8 32.8 0 0 0 20-6.3l35.1 31c1.5 1.4 3.9.3 3.9-1.7V2.2a2.2 2.2 0 0 0-2.2-2.2h-56Z"
            />
          </svg>
        </a>
      </p>

      <div class="header-content">
        <div class="searchbox-container">
          <label for="search-input">
            <svg
              data-layout="mobile"
              class="magnifier-icon"
              xmlns="http://www.w3.org/2000/svg"
              xmlns:xlink="http://www.w3.org/1999/xlink"
              width="22"
              height="22"
              viewBox="0 0 22 22"
            >
              <defs>
                <path
                  id="a"
                  d="M20.981 19.094l-4.2-4.199c2.733-3.656 2.473-8.84-.848-12.161a9.333 9.333 0 0 0-13.2 13.199c3.323 3.322 8.507 3.581 12.163.848l4.198 4.2c.522.52 1.366.52 1.887 0 .52-.522.52-1.366 0-1.887zm-6.933-5.047a6.668 6.668 0 0 1-9.428 0 6.666 6.666 0 0 1 0-9.428 6.666 6.666 0 0 1 9.428 0 6.668 6.668 0 0 1 0 9.428z"
                />
                <linearGradient
                  id="b"
                  x1="100%"
                  x2="0%"
                  y1="85.172%"
                  y2="14.828%"
                >
                  <stop offset="0%" stop-color="#764BA2" />
                  <stop offset="100%" stop-color="#667EEA" />
                </linearGradient>
              </defs>
              <g fill="none" fill-rule="evenodd">
                <mask id="c" fill="#fff">
                  <use xlink:href="#a" />
                </mask>
                <use fill="#4BC0D9" xlink:href="#a" />
                <path fill="url(#b)" d="M-3-3h31v26H-3z" mask="url(#c)" />
              </g>
            </svg>
            <svg
              data-layout="desktop"
              class="magnifier-icon"
              viewBox="0 0 17 17"
            >
              <path
                fill="currentColor"
                fill-rule="evenodd"
                d="M16.69 15.189l-3.341-3.34c2.174-2.908 1.967-7.032-.675-9.674a7.424 7.424 0 1 0-10.5 10.5c2.643 2.642 6.767 2.848 9.675.674l3.34 3.34a1.063 1.063 0 0 0 1.5 0 1.063 1.063 0 0 0 0-1.5zm-5.288-3.787A5.37 5.37 0 0 1 3.81 3.81a5.368 5.368 0 1 1 7.592 7.592z"
              />
            </svg>
          </label>

          <div
            data-widget="selected-topics-desktop"
            data-layout="desktop"
          ></div>
          <div data-widget="searchbox" class="searchbox-container-input"></div>
          <button
            data-action="toggle-filters"
            class="container-filters-button"
            title="Filter"
            data-layout="mobile"
          >
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 22">
              <g
                fill="none"
                fill-rule="evenodd"
                stroke="#7259B6"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
              >
                <path
                  d="M4.273 20.636V13M4.273 8.636V1M13 20.636v-9.818M13 6.455V1M21.727 20.636v-5.454M21.727 10.818V1M1 13h6.545M9.727 6.455h6.546M18.455 15.182H25"
                />
              </g>
            </svg>
          </button>
        </div>

        <div class="topics-container">
          <div
            class="selected-topics-mobile"
            data-widget="selected-topics-mobile"
            data-layout="mobile"
          ></div>
          <div data-widget="topics"></div>
        </div>
      </div>
    </header>

    <main class="container">
      <div class="container-filters" data-layout="desktop">
        <div class="container-filters-left">
          <button data-action="toggle-filters" class="container-filters-button">
            <svg viewBow="0 0 16 13">
              <path
                d="M2.91 12V7.72m0-2.44V1M8 12V6.5m0-2.44V1m5.09 11V8.94m0-2.44V1M1 7.72h3.82m1.27-3.66h3.82m1.27 4.88H15"
                fill="none"
                fill-rule="evenodd"
                stroke="#7C56DD"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
              />
            </svg>

            <h2 class="container-filters-title">Filter</h2>
          </button>

          <div data-widget="stats" class="container-filters-filter"></div>
          <div
            data-widget="clear-filters-desktop"
            class="container-filters-filter"
          ></div>
        </div>
      </div>

      <div
        id="filters"
        class="container-filters-panel container-filters-panel--hidden"
      >
        <div
          data-layout="desktop"
          class="container-filters-panel-column-wrapper"
        >
          <div
            data-widget="dates-desktop"
            class="container-filters-panel-column container-filters-panel-column--dates"
          ></div>
          <div
            data-widget="categories-desktop"
            class="container-filters-panel-column"
          ></div>
        </div>
        <div data-layout="mobile" class="container-filters-panel-mobile">
          <div class="container-filters-header">
            <h2 class="container-filters-title">Filters</h2>
            <div data-widget="clear-filters-mobile"></div>
          </div>
          <div data-widget="dates-mobile"></div>
          <div data-widget="categories-mobile"></div>
          <div class="container-filters-footer">
            <button class="see-results-button">
              <div data-widget="see-results-button"></div>
            </button>
          </div>
        </div>
      </div>

      <section class="container-results">
        <div data-widget="hits"></div>
      </section>
    </main>

    <footer class="footer">
      <aside class="back-to-top">
        <a href="#" title="Back to top">
          <svg viewBow="0 0 40 40">
            <defs>
              <linearGradient id="d" x1="100%" x2="0%" y1="100%" y2="0%">
                <stop offset="0%" stop-color="#764ba2" />
                <stop offset="100%" stop-color="#667eea" />
              </linearGradient>
            </defs>
            <g fill="none" fill-rule="evenodd">
              <circle cx="20" cy="20" r="20" fill="url('#d')" />
              <path
                stroke="#FFF"
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="3"
                d="M28 20l-8-8-8 8m8 8V12"
              />
            </g>
          </svg>
        </a>
      </aside>
      <div class="mentions">
        <p>
          InstantSearch.js is an open-source, production-ready library that lets
          you quickly build a search interface in your front-end application.
        </p>
        <p>
          This demo uses data from the Algolia blog. Follow
          <a href="https://algolia.com/blog">this link</a> to benefit from the
          official blog experience.
        </p>
      </div>
    </footer>

    <script type="module" src="./src/app.ts"></script>
  </body>
</html>
